<template>
  <div class="heath-box">
    <el-tabs>
      <el-tab-pane label="每日填报">
        <el-card v-if="showBox" shadow="always" @click="getRecording">
          <div class="clockbox">
            <div class="left">
              <div><span style="font-size: 10px">每日健康打卡</span></div>
              <div>{{ this.createTime }}</div>
            </div>
            <div class="right">
              <el-icon><ArrowRightBold /></el-icon>
            </div>
          </div>
        </el-card>
        <el-card v-else>
          <!-- 隐藏内容的占位符 -->
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="填报记录">
        <el-card
          v-for="(item, index) in tableData"
          :key="index"
          shadow="hover"
          @click="getRecordingContent(item)"
          class="mb-10"
        >
          <div class="clockbox" style="font-size: 15px">
            <div class="left">
              <span>每日健康打卡</span>
              <div style="font-size: 10px">{{ timeformat(item) }}</div>
            </div>
            <div class="right">
              <el-tag type="success"> 已填写 </el-tag
              ><el-icon><ArrowRightBold /></el-icon>
            </div>
          </div>
        </el-card>
        <!-- <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
            prop="createTime"
            :formatter="timeformat"
            label="时间"
            width="150"
          />
          <el-table-column label="用户名">{{ user.username }}</el-table-column>
          <el-table-column prop="morningTemp" label="早上体温" />
          <el-table-column prop="afternoonTemp" label="中午体温" />
          <el-table-column prop="nightTemp" label="中午体温" />
          <el-table-column prop="symptom" label="症状" />
          <el-table-column prop="recentHome" label="近期所在地" />
          <el-table-column prop="riskZone" label="风险区" />
          <el-table-column prop="recentZone" label="风险区" />
          <el-table-column prop="healthStatus" label="时间" />

          <el-table-column label="查看报告" min-width="100">
            <template v-slot:default="scope">
              <el-button type="success" @click="watchreport(scope.row)"
                >查看<el-icon><Edit /></el-icon
              ></el-button>
            </template>
          </el-table-column>
        </el-table> -->
      </el-tab-pane>
      <el-tab-pane label="已填报">
        <el-card v-for="(item, index) in filledList" :key="index">
          <!-- 已打卡数据展示区域，可以根据具体需求进行修改 -->
          <div class="clockbox">
            <div class="left">
              <div>{{ item.uid }}</div>
              <div>{{ this.createTime }}</div>
            </div>
            <div class="right">
              <el-icon><ArrowRightBold /></el-icon>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="未填报">
        <el-card v-for="(item, index) in unfilledList" :key="index">
          <!-- 未打卡数据展示区域，可以根据具体需求进行修改 -->
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

export default {
  name: 'my_heathclock',
  data() {
    return {
      user: localStorage.getItem('user')
        ? JSON.parse(localStorage.getItem('user'))
        : {},

      tableData: [],
      createTime: this.timeformat(new Date()),

      showBox: true, // 是否显示每日打卡任务卡片
      isFillIn: false, // 当前是否已经打卡

      filledList: [], // 已打卡数据列表
      unfilledList: [], // 未打卡数据列表

      // fillid: 0
      currenttime: new Date(),

      // 选中的数据
      selectedItem: null
    }
  },
  mounted() {
    //隐藏和打卡
    const showBoxform = this.$route.query.showBox === 'true'
    const isFillInform = this.$route.query.isFillIn === 'true'
    const newtime = this.$route.query.time
    // const NewArrayList = this.$route.query.ArrayList
    // console.log(NewArrayList)

    console.log('隐藏和打卡')
    console.log(showBoxform)
    console.log(isFillInform)
    console.log(newtime)

    // this.showBox = showBoxform
    this.isFillIn = isFillInform
    this.currenttime = newtime
  },
  created() {
    // 从localStorage中获取当前用户信息
    const user = localStorage.getItem('user')
      ? JSON.parse(localStorage.getItem('user'))
      : {}
    this.userId = user.id
    this.load()

    // 每隔1分钟执行一次
    setInterval(() => {
      const now = new Date()
      const hour = now.getHours()
      const minute = now.getMinutes()
      if (hour === 0 && minute === 0) {
        // 显示每日打卡任务卡片
        this.showBox = true
        // this.createTime = now.toLocaleString()
      } else if (hour === 22 && minute === 0) {
        // 判断是否已经完成打卡任务，如果没有则将每日打卡任务卡片隐藏
        if (!this.isFillIn) {
          console.log('未打卡')
          this.showBox = true
          // 在未打卡tab标签页中新增一条打卡数据
          this.unfilledList.push({
            /* 打卡数据对象 */
            uid: this.user.uid
          })
          console.log(this.unfilledList)
        }
      }
    }, 60000) // 每隔1分钟执行一次
  },

  methods: {
    hideBox() {
      // 隐藏盒子
      this.showBox = false
    },

    getRecording() {
      // 跳转到录入页面，并传递showBox状态
      // const showBox = this.showBox

      this.$router.push({ path: '/front/recording' })
    },
    getRecordingContent(item) {
      this.selectedItem = item
      // 跳转到录入页面，并传递showBox状态
      // const showBox = this.showBox
      console.log(this.selectedItem)
      this.$router.push({
        path: '/front/reviserecording',
        query: {
          selectedItem: JSON.stringify(item)
        }
      })
    },

    load() {
      this.$http.get(`/healthclock/${this.userId}`).then((res) => {
        console.log(res)
        this.tableData = res.data
      })
    },

    //初始化省市
    handleChange(value) {
      console.log(value)
      if (value != null) {
        console.log(value)
        console.log(
          CodeToText[value[0]],
          CodeToText[value[1]],
          CodeToText[value[2]]
        )
        this.form.provinceCode = value[0]
        this.form.cityCode = value[1]
        this.form.areaCode = value[2]
        this.form.recentHome =
          CodeToText[value[0]] +
          '/' +
          CodeToText[value[1]] +
          '/' +
          CodeToText[value[2]]
        console.log('页面选择:' + this.form.recentHome)
      } else {
        this.form.recentHome = ''
      }
    },

    // 时间格式
    timeformat(row) {
      return this.$moment(row.createTime).format('yyyy-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: right;
}
.clockbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    display: flex;
    align-items: center;
  }
}
</style>